Vue.component('my-header', {
    data: function () {
        return {
            user: localStorage.user ? JSON.parse(localStorage.user) : null,
            activeIndex: "0"
        }
    },
    methods: {
        //退出登录
        logout() {
            this.$confirm('您确定要退出登录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.get("/v1/users/logout/" + this.user.id).then(response => {
                    //清空登录成功时保存在localStorage中的信息
                    localStorage.clear();
                    location.href = "/usermodel/login.html"
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出登录'
                });
            });
        },
        handleSelect(key, keyPath) {
            if (this.user != null) {
                switch (key) {
                    case '0':
                        location.href = "/usermodel/index.html";
                        break;
                    case '5':
                        location.href = "/usermodel/personal.html";
                        break;

                }
            }
        }
    },
    created() {
        if (location.pathname.includes("reg") || location.pathname.includes("login")) {
            this.activeIndex = null;
        }
        if (location.pathname.includes("index")) {
            this.activeIndex = "0";
        }
        if (location.pathname.includes("personal") || location.pathname.includes("friendlist")) {
            this.activeIndex = "5";
        }
    },

    template: `
       <el-header style="height: 80px;">
           <div class="center">
               <el-col span="9">
                    <a href="javascript:(0)">
                        <img style="margin-left: 110px" src="../img/usermodel/logo.jpg" width="150" height="80">
                    </a>
                </el-col>
                <el-col span="12">
                    <el-menu mode="horizontal" @select="handleSelect" :default-active="activeIndex" 
                    active-text-color="#169FE4" style="border: none;margin-top: 10px">
                        <el-menu-item class="header_menu" index="0" style="color: black">首页</el-menu-item>
                        <el-menu-item class="header_menu" index="1" style="color: black">笔记</el-menu-item>
                        <el-menu-item class="header_menu" index="2" style="color: black">视频</el-menu-item>
                        <el-menu-item class="header_menu" index="3" style="color: black">社区</el-menu-item>
                        <el-menu-item class="header_menu" index="4" style="color: black">在线考试</el-menu-item>
                        <el-menu-item class="header_menu" index="5" style="color: black">个人中心</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col span="3">
                    <el-popover v-if="user==null" placement="top-start" title="欢迎来到雅阁" trigger="hover">
                        <div slot="reference">
                            <i class="el-icon-user"
                           style="font-size: 30px;position: relative;top: 20px;right: 50px"></i>
                        </div>
                        <a href="/usermodel/login.html" style="text-decoration: none;color: #666666;font-weight: normal;">立即登录</a>
                    </el-popover>
                    
                    <el-popover v-else placement="top-start" title="欢迎来到雅阁" trigger="hover">
                        <div slot="reference">
<!--                            <i class="el-icon-user"-->
<!--                           style="font-size: 30px;position: relative;top: 20px;right: 50px"></i>-->
                        <el-avatar style="position: relative;top: 20px;right: 50px" :src="user.avatar"></el-avatar>
                        </div>
                        <a href="javascript:void(0)" @click="logout" style="text-decoration: none;color: #666666;font-weight: normal;">退出登录</a>
                    </el-popover>
                    
                </el-col>
            </div>
        </el-header>
    `
})